import React, { useEffect } from 'react'
import style from './style.module.scss'
import { useRecoilState } from 'recoil'
import { UserBannerMock } from './mock'
import AvatarView from '../../AvatarView'
import FollowBnt from '../../Button/FollowBtn'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGlobeAfrica, faMapMarker } from '@fortawesome/free-solid-svg-icons'
import { Link } from 'react-router-dom'
import { UserService } from '../../../transfer/service/UserService'

interface IUserProps {
    userId: string
}

export default function UserBanner(props: IUserProps) {
    const [user, setUser] = useRecoilState(UserBannerMock)

    useEffect(() => {
        new UserService().getProfile(props.userId).then(res => {
            setUser(res.data.data.profile)
        })
    }, [props.userId])

    return (
        <div className={style.container} id={'userBanner'}>
            <div className={style.content}>
                <div className={style.head}>
                    <AvatarView width={'150px'} height={'150px'} img={'http://localhost:3000/' + user.avatar} />
                </div>
                <div className={style.info}>
                    <div className={style.name}>
                        <span>{user.nickName}</span>
                        <FollowBnt width={'42px'} height={'32px'} userId={props.userId} />
                    </div>
                    <span>{user.intro}</span>
                    <Link to={'/search/photos/' + user.location} className={style.link}>
                        <div className={style.icon}>
                            <FontAwesomeIcon icon={faMapMarker} />
                        </div>
                        <span>{user.location}</span>
                    </Link>
                    <a href={user.personalSite} className={style.link}>
                        <div className={style.icon}>
                            <FontAwesomeIcon icon={faGlobeAfrica} />
                        </div>
                        <span>{user.personalSite}</span>
                    </a>
                    {/*<span>兴趣爱好</span>*/}
                    {/*<div className={style.tag__list}>*/}
                    {/*    {user.interests.map((item, index) => {*/}
                    {/*        return (*/}
                    {/*            <Link to={'/search/photos/' + item} className={style.item} key={index}>*/}
                    {/*                <span>{item}</span>*/}
                    {/*            </Link>*/}
                    {/*        )*/}
                    {/*    })}*/}
                    {/*</div>*/}
                </div>
            </div>
        </div>
    )
}
